<!-- 溯码管理 -->
<div class="inner wrp app_list" id="suma_item">
    <div class="container_box cell_layout">
        <div class="col_side">
            <div class="menu_box">
                <ul id="m_menu_nav" class="menu">
                    <li pagetype="buy_page" class="menu_item first selected">
                        <a href="javascript:;" data-page="buy_page" target="_self" class="menu_link jsUrlLink " >溯码购买</a>
                    </li>
                    <li pagetype="order_page" class="menu_item">
                        <a href="javascript:;" data-page="order_page" target="_self" class="menu_link jsUrlLink" >溯码订单</a>
                    </li>
                    <li pagetype="suma_publish" class="menu_item">
                        <a href="javascript:;" data-page="suma_publish" target="_self" class="menu_link jsUrlLink" >溯码发布</a>
                    </li>
                    <li pagetype="publish_log" class="menu_item">
                        <a href="javascript:;" data-page="publish_log" target="_self" class="menu_link jsUrlLink" >发布记录</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 溯码购买 -->
        <div class="col_main" id="buy_page_body">
            <div class="main_hd suma_main_hd">
                <div class="main_hd_box">
                    <div style="float:right;">
                        {#                                <a id="email_bt" class="" href="javascript:;">修改</a>#}
                    </div>
                    <h2>溯码购买</h2>
                </div>
            </div>
            {% if suma_product_list %}
                <form class="form form_padding" id="suma_form" novalidate="novalidate">
                    {% csrf_token %}
                    <div class="frm_control_group" id="product_name_group">
                        <label for="" class="frm_label frm_select_label">产品名称</label>
                        {#                            <div class="frm_controls ">#}
                        <select id="product_id" class="frm_select_box" value=""  name="product_id">
                            <option value ="" class="frm_select button">--请选择产品--</option>
                            {% for product in suma_product_list %}
                                {% if product.brand.check_status == 2 and product.check_status == 2%}
                                    <option value ="{{ product.id }}" class="frm_select button">{{ product.name }}</option>
                                {%  endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div class="frm_control_group" id="buy_numbers_group">
                        <label for="" class="frm_label">购买数量</label>
                        <div class="frm_controls">
                            <span class="frm_input_box">
                                <input name="suma_num" id="suma_num" class="frm_input" type="number">
                            </span>
                        </div>
                    </div>
                    <div class="tool_bar border with_form">
                        <div class="frm_controls">
                            <label class="frm_label margin_bottom">总金额</label>
                            <span id="sum_amount" class="sum_amount">0</span><span class="sum_amount">&nbsp;元</span>
                        </div>
                        <div class="btn btn_primary jsSendBt" id="summaOrderBtn">提交订单</div>
                    </div>
                </form>
            {% else %}
                <div class="form form_padding" novalidate="novalidate">
                    <p class="empty_tips">没有创建产品或产品(品牌)未审核通过</p>
                </div>
            {% endif %}
        </div>

        <!-- 溯码订单 -->
        <div class="col_main" id="order_page_body" style="display: none;">
            <table class="table mp_account" id="suma_order_table"  cellspacing="0" width="100%">
                <thead class="thead">
                <tr>
                    <th class="table_cell content">订单ID</th>
                    <th class="table_cell content">产品</th>
                    <th class="table_cell content">起始序号</th>
                    <th class="table_cell content">结束序号</th>
                    <th class="table_cell content">数量</th>
                    <th class="table_cell content">状态</th>
                    <th class="table_cell content">创建时间</th>
                </tr>
                </thead>
            </table>
        </div>

        <!-- 溯码发布 -->
        <div class="col_main" id="suma_publish_body" style="display: none;">
            <div class="main_hd suma_main_hd">
                <div class="main_hd_box">
                    <h2>溯码发布</h2>
                </div>
            </div>
            <form class="form form_padding" id="publish_smcode_form" novalidate="novalidate">
                {% csrf_token %}
                <div class="frm_control_group">
                    <label for="" class="frm_label">产品</label>
                    <select id="smcode_product_id" class="frm_select_box" value="" lay-filter="smcode_product_id" name="product_id">
                        <option value ="" class="frm_select button">--请选择产品--</option>
                    </select>
                </div>
                <div class="frm_control_group" id="start_code_group">
                    <label for="" class="frm_label">起始号码</label>
                    <div class="frm_controls">
                        <span class="frm_input_box">
                            <input name="start_code" id="start_code" class="frm_input" type="text" readonly>
                        </span>
                    </div>
                </div>
                <div class="frm_control_group" id="numbers_group">
                    <label for="" class="frm_label">未发布数量</label>
                    <div class="frm_controls">
                        <span class="frm_input_box">
                            <input name="residue" id="residue" class="frm_input" type="text" readonly>
                        </span>
                    </div>
                </div>
                <div class="frm_control_group" id="numbers_group">
                    <label for="" class="frm_label">发布数量</label>
                    <div class="frm_controls">
                        <span class="frm_input_box">
                            <input name="number" id="number" class="frm_input" type="number">
                        </span>
                    </div>
                </div>
                <div class="frm_control_group" id="end_code_group">
                    <label for="" class="frm_label">结束号码</label>
                    <div class="frm_controls">
                        <span class="frm_input_box">
                            <input name="end_code" id="end_code" class="frm_input" type="text" readonly>
                        </span>
                    </div>
                </div>

                <div class="frm_control_group" id="end_code_group">
                    <label for="" class="frm_label">发往地区</label>
                    <select id="area" class="frm_select_box" value="" name="area">
                        <option value ="" class="frm_select button">--请选择地区--</option>
                        <option value ="北京市" class="frm_select button">北京市</option>
                        <option value ="天津市" class="frm_select button">天津市</option>
                        <option value ="河北省" class="frm_select button">河北省</option>
                        <option value ="山西省" class="frm_select button">山西省</option>
                        <option value ="内蒙古" class="frm_select button">内蒙古</option>
                        <option value ="辽宁省" class="frm_select button">辽宁省</option>
                        <option value ="吉林省" class="frm_select button">吉林省</option>
                        <option value ="黑龙江省" class="frm_select button">黑龙江省</option>
                        <option value ="江苏省" class="frm_select button">江苏省</option>
                        <option value ="浙江省" class="frm_select button">浙江省</option>
                        <option value ="安徽省" class="frm_select button">安徽省</option>
                        <option value ="福建省" class="frm_select button">福建省</option>
                        <option value ="江西省" class="frm_select button">江西省</option>
                        <option value ="山东省" class="frm_select button">山东省</option>
                        <option value ="河南省" class="frm_select button">河南省</option>
                        <option value ="湖北省" class="frm_select button">湖北省</option>
                        <option value ="湖南省" class="frm_select button">湖南省</option>
                        <option value ="广东省" class="frm_select button">广东省</option>
                        <option value ="广西自治区" class="frm_select button">广西自治区</option>
                        <option value ="海南省" class="frm_select button">海南省</option>
                        <option value ="重庆市" class="frm_select button">重庆市</option>
                        <option value ="四川省" class="frm_select button">四川省</option>
                        <option value ="贵州省" class="frm_select button">贵州省</option>
                        <option value ="云南省" class="frm_select button">云南省</option>
                        <option value ="西藏自治区" class="frm_select button">西藏自治区</option>
                        <option value ="陕西省" class="frm_select button">陕西省</option>
                        <option value ="甘肃省" class="frm_select button">甘肃省</option>
                        <option value ="青海省" class="frm_select button">青海省</option>
                        <option value ="宁夏回族自治区" class="frm_select button">宁夏回族自治区</option>
                        <option value ="新疆维吾尔自治区" class="frm_select button">新疆维吾尔自治区</option>
                        <option value ="香港特别行政区" class="frm_select button">香港特别行政区</option>
                        <option value ="澳门特别行政区" class="frm_select button">澳门特别行政区</option>
                        <option value ="台湾省" class="frm_select button">台湾省</option>
                    </select>
                </div>
                <div class="frm_control_group" id="price_group">
                    <label for="" class="frm_label">建议售价</label>
                    <div class="frm_controls">
                        <span class="frm_input_box" style="width: 100px;">
                            <input name="price" id="price" class="frm_input" type="text">
                        </span>
                        <span>元</span>
                    </div>
                </div>
                <div class="tool_bar border with_form">
                    <div class="btn btn_primary jsSendBt" id="publishCodeBtn">发布</div>
                </div>
            </form>
        </div>

        <!-- 溯码发布记录 -->
        <div class="col_main" id="publish_log_body" style="display: none;">
            <table class="table mp_account" id="suma_publish_table"  cellspacing="0" width="100%">
                <thead class="thead">
                <tr>
                    <th class="table_cell content">产品</th>
                    <th class="table_cell content">数量</th>
                    <th class="table_cell content">起始序号</th>
                    <th class="table_cell content">结束序号</th>
                    <th class="table_cell content">发往地区</th>
                    <th class="table_cell content">建议售价(元)</th>
                    <th class="table_cell content">发布时间</th>
                </tr>
                </thead>
                <tbody class="tbody" id="suma_publish_tb">
                <tr>
                    <td colspan="7">
                        <p class="empty_tips">暂无数据</p>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col_main" id="email_body" style="display: none">
        </div>
    </div>
</div>
</div>

{% block footscript %}
    <script>
        // 表格
        var suma_order_table ;
        var suma_publish_log_table;

        // 溯码单价
        var suma_price = {{ price }};
        function getCookie(c_name)
        {
            if (document.cookie.length>0)
            {
                c_start=document.cookie.indexOf(c_name + "=");
                if (c_start!=-1)
                {
                    c_start=c_start + c_name.length+1;
                    c_end=document.cookie.indexOf(";",c_start);
                    if (c_end==-1) c_end=document.cookie.length;
                    return unescape(document.cookie.substring(c_start,c_end))
                }
            }
            return ""
        }
        // 初始化溯码订单表格
        function init_suma_order_table(){
            suma_order_table = $('#suma_order_table').DataTable({
                dom: 't<"wrapper"ip>',
                "ajax": {
                    "url": "{% url "smErp:suma_order_list" %}",
                    "dataSrc": "data",
                    "type": "POST",
                    "data": function (d) {
                        d.csrfmiddlewaretoken = getCookie("csrftoken");
                    }
                },
                order: [0, 'desc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {"data": "order_id"},
                    {"data": "product_name"},
                    {"data": "start_num"},
                    {"data": "end_num"},
                    {"data": "numbers"},
                    {"data": "order_status"},
                    {"data": "ctime"}
                ],
                "columnDefs": [ {
                    "targets": 5,
                    "data": "order_status",
                    "render": function ( data, type, row, meta ) {
                        console.log( row);
                        if(data == 2) {
                            return '<a href="javascript:void(0);" data-order="' + row.order_id + '" onclick=down_suma_file(this)>下载</a>';
                        }else if(data == 1){
                            return "溯码处理中";
                        }else if(data == 0){
                            return "未付款";
                        }else{
                            return "其他";
                        }
                    }
                } ],
                "language": table_lanage,
            });
        }
        // 初始化溯码发布记录表格
        function init_suma_publish_log_table(){
            suma_publish_log_table = $('#suma_publish_table').DataTable({
                dom: 't<"wrapper"ip>',
                "ajax": {
                    "url": "{% url "smErp:suma_publish_list" %}",
                    "dataSrc": "data",
                    "type": "POST",
                    "data": function (d) {
                        d.csrfmiddlewaretoken = getCookie("csrftoken");
                    }
                },
                order: [0, 'desc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {"data": "product_name"},
                    {"data": "num"},
                    {"data": "start_no"},
                    {"data": "end_no"},
                    {"data": "province"},
                    {"data": "price"},
                    {"data": "create_time"},
                ],
                "language": table_lanage,
            });
        }
        // 获取产品溯码下拉选项
        function init_product_suma_select(){
            $.ajax({
                    url: "{% url 'smErp:suma_product_list' %}",
                    type:"POST",
                    headers:{ "X-CSRFtoken":getCookie("csrftoken")},
                    success:function (data) {
                        console.log(data);
                        if(data.result == 0){
                            var smcode_product_list = data.smcode_product_list;
                            // 将选项加入下拉框
                            $("#smcode_product_id").empty();
                            for(i = 0 ; i < smcode_product_list.length ;i++){
                                var option = "<option" + " data-start=" + smcode_product_list[i].start_no  + " data-residue=" + smcode_product_list[i].residue +
                                        " value='" + smcode_product_list[i].product_id + "'>" + smcode_product_list[i].product_name + "</option>";
                                $("#smcode_product_id").append(option);
                            }
                            $("#smcode_product_id").prepend('<option value ="" class="frm_select button" selected>--请选择产品--</option>');
                        }else{
                            layer.msg(data.reason);
                        }
                    }
                });
        }
        // 初始化订单表格
        init_suma_order_table();
        // 初始化溯码发布记录表格
        init_suma_publish_log_table();
        function show_menu_nav_page(apptype){
{#            alert(apptype);#}
            if(apptype == 'buy_page'){
                $("#buy_page_body").show();
                $("#order_page_body").hide();
                $("#suma_publish_body").hide();
                $("#publish_log_body").hide();
                // 清空输入项
                $(':input','#suma_form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
                $("#sum_amount").html(0);
            }else if(apptype == 'order_page'){
                $("#buy_page_body").hide();
                $("#order_page_body").show();
                $("#suma_publish_body").hide();
                $("#publish_log_body").hide();
                // todo: 重载订单表格数据
                 suma_order_table.ajax.reload();

            }else if(apptype == 'suma_publish'){
                $("#buy_page_body").hide();
                $("#order_page_body").hide();
                $("#suma_publish_body").show();
                $("#publish_log_body").hide();
                // 请求到产品溯码信息
                // 清空输入框的内容
                $(':input','#publish_smcode_form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
                init_product_suma_select()

            }else if(apptype == 'publish_log'){
                $("#buy_page_body").hide();
                $("#order_page_body").hide();
                $("#suma_publish_body").hide();
                $("#publish_log_body").show();
                // 重载发布表格
                suma_publish_log_table.ajax.reload();

            }else{
                return ;
            }

        }

        var selected_page = $("#m_menu_nav").children("li[class='menu_item first selected']");
        $(".menu_link").on('click',function(){
{#            alert($(this).data("page"));#}
            selected_page.removeClass("selected");
            $(this).parent().addClass("selected");
            selected_page = $(this).parent();
            show_menu_nav_page($(this).data("page"));

        });


        // 购买金额
        $("#suma_num").blur(function(){
            var v = $(this).val();
            // 更新金额
            if($(this).val()){
                console.log($(this).val());
                var sum_amount = ($(this).val() * (parseInt(suma_price) / 100.0)).toFixed(2);     //
                $("#sum_amount").html(sum_amount);
            }
        }).focus();


        // 溯码订单
        $("#summaOrderBtn").on("click", function(){
            alert("溯码订单下单");
            var num = $("#suma_num").val();
            if(!num){
                layer.msg("请输入购买数量");
                return;
            }
            if(num < 100){
                layer.msg("购买数量必须大于1万");
                return;
            }
            var params = $("#suma_form").serialize();
            $.ajax({
               type: 'POST',
                url: '{% url "smErp:suma_order" %}',
                data:params,
                dataType: 'json',
                success: function(data){
                    $("#suma_num").val("");
                    $("#sum_amount").html("0");
                    if(data.result == 0){
                        layer.msg("订单提交成功");
                        // 跳转到订单
                        $(".menu_link[data-page=order_page]").click();
                    }else{
                        layer.msg("订单提交失败: " + data.reason);
                    }
                }

            });
        });

        $("#smcode_product_id").bind("change",function(){
            var option = $(this).find('option:selected'); //获取选中的项
{#            alert(option.data("residue")); //拿到选中项的值#}
{#            alert(option.data("start"));#}
            $("#residue").val(option.data("residue"));
            $("#start_code").val(option.data("start"));
        });

        $("#number").blur(function(){
            var num = $("#number").val();
            var residue = $("#residue").val();
            if(!num){
                layer.msg("输入正确的数量");
                return;
            }
            if(parseInt(num) > parseInt(residue)){
                layer.msg("输入数量超过剩余数量");
                $("#number").val("");
                return;
            }
            var end_code = parseInt($("#start_code").val()||0) + parseInt(num) - 1;
            $("#end_code").val(end_code);
        });

        $("#publishCodeBtn").on("click", function(){
            var num = $("#number").val();
            var smcode_product_id = $("#smcode_product_id").val();
            var price = $("#price").val();
            var area = $("#area").val();
            if(!smcode_product_id){
                layer.msg("请选择产品");
                return;
            }
            if(!num){
                layer.msg("请输入购买数量");
                return;
            }
            if(!area){
                layer.msg("请选择地区");
                return;
            }
            if(!price){
                layer.msg("请输入建议售价");
                return;
            }
            var params = $("#publish_smcode_form").serialize();
            alert(params);
            $.ajax({
               type: 'POST',
                url: '{% url "smErp:suma_publish" %}',
                data: params,
                dataType: 'json',
                success: function(data){
                    if(data.result == 0){
                        layer.msg("订单提交成功");
                        // $(':input','#publish_smcode_form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
                        // 跳转到发布页
                        $(".menu_link[data-page=publish_log]").click();
                    }else{
                        layer.msg("订单提交失败: " + data.reason);
                    }
                }

            });
        });

        function down_suma_file(obj){
            var orderid = $(obj).data("order");
            alert("下载订单：" + orderid);
            $.ajax({
               type: 'POST',
                url: '{% url "smErp:smcode_file_down" %}',
                headers:{ "X-CSRFtoken":getCookie("csrftoken")},
                data: { "orderid" : orderid },
                dataType: 'json',
                success: function(data){
                    if(data.result == 0){
                        layer.msg("下载成功");
                        window.location.href = data.file_down_url;
                    }else{
                        layer.msg("下载溯码失败: " + data.reason);
                    }
                }

            });
        }

    </script>
{% endblock %}




